<template>
  <div class="nice">
    <h3>歌手名：{{ userName }}</h3>
    <h3>著名歌曲：{{ songName }}</h3>
    <button @click="sendSongName">把歌曲名称传递给父组件App</button>
    <button @click="unbind">解绑 zhoujielun 事件</button>
    <button @click="destroy">销毁当前组件的事件</button>
    <hr />
  </div>
</template>

<script>
export default {
  name: "Song",
  data() {
    return {
      userName: "周杰伦",
      songName: "《夜曲》、《七里香》、《稻香》",
    };
  },
  methods: {
    sendSongName() {
      this.$emit("zhoujielun", this.songName);
    },
    unbind() {
      this.$off("zhoujielun"); //解绑一个自定义事件
      //this.$off(["zhoujielun","other"]);//解绑多个自定义事件
      //this.$off();//解绑所有的自定义事件
    },
    destroy() {
      //销毁了当前组件的实例，销毁后所有Song实例的自定义事件全部失效。
      this.$destroy();
    },
  },
};
</script>

<style scoped>
.nice {
  /* 设置背景色为：天蓝色 */
  background-color: skyblue;
}
</style>